<template>
	<scroll-view class="wrapper" scroll-y="true">
		<exam-item v-for="(item,index) in list" :key="index" :index="index" :item="item" @checkChange="updateScores"
			:showResult="showItemResult"></exam-item>

		<u-button :disabled="btnSubmitDisabled" class="btn-start" type="primary" @click="submitPaper">提交答案</u-button>

		<!-- <u-modal v-model="showResult" :content="examResult"></u-modal> -->
		<u-modal title="面试成绩" v-model="showResult"
			:title-style="{color:'#666',padding:'20rpx 0',borderBottom:'1px solid #f0f0f0'}" width="90%">
			<view class="slot-content">
				<rich-text :nodes="examResult"></rich-text>
			</view>
		</u-modal>

	</scroll-view>
</template>

<script>
	import "@/components/exam-item/exam-item.scss";

	import {
		mapState,
		mapActions
	} from "vuex";

	export default {
		name: "exam",

		data() {
			return {
				list: [],
				scores: [],
				showResult: false,
				showItemResult: false,
				examResult: "",
				btnSubmitDisabled: false
			}
		},

		computed: mapState([
			'baseUrl',
		]),

		methods: {
			submitPaper(e) {
				// uni.navigateBack()
				let finalScore = this.scores.reduce(
					(pv, cv) => pv + cv * (100 / this.list.length), 0
				)
				console.log("submitPaper", this.scores, finalScore);

				this.examResult = `
				<div style="height:100px;display:flex;justify-content:center;align-items:center;">
					您的考试分数为： <span style="font-size:1.3rem;color:orangered;font-style:italic;">${finalScore}</span>
				</div>
				`
				this.showResult = true
				this.showItemResult = true
				this.btnSubmitDisabled = true
			},

			updateScores(index, score) {
				this.scores[index] = score
			}
		},

		onLoad({
			aid
		}) {
			console.log("exam onLoad aid=", aid);
			uni.request({
				url: this.baseUrl + `/interview/album/${aid}`,
				success: (res) => {
					this.list = res.data
					this.scores = this.list.map(item => 0)
				},
				fail(err) {
					console.log("err=", err);
				}
			})
		}
	}
</script>

<style lang="scss">
	.wrapper {
		padding: 15rpx 0;
		padding-bottom: 50rpx;

		.btn-start {
			display: block;
			margin: 30rpx 20rpx 100rpx;
		}

		.slot-content {
			font-size: 1.15rem;
			color: #666;
			padding-right: 30rpx;
		}

	}
</style>